require(['./config'], () => {
    require(['template','header','footer','fly'], (template,header) => {
        class detail{
            constructor(){  
                this.getDetialData().then(()=>{
                    this.changeImage();
                    this.hover();
                    this.addToCart();
                })
                // this.move();
                // this.hover();
                
            }
            getDetialData(){
                const id = window.location.search.slice(4);
                return new Promise(resolve => {
                    $.get('http://rap2api.taobao.org/app/mock/234038/detail',{id},resp=>{
                        // console.log(list);
                        if(resp.code == 200){
                        const {list} = resp.body;
                        this.list = {
                            ...list,
                            id
                        }
                        $('#detail_show').html(template('detail_showTemplate',{list}));
                        resolve();
                        
                        }
                    })
                })               
            }
            changeImage(){//图片移动
                $('#left-wholeImg div').on('click',function(e){//点击事件                                    
                    var width = $('#right-showImag1 img').eq(0).width();
                    var showImag1 = $(' #right-showImag1'); 
                    $(this).css('border-color','red');
                    $(this).siblings().css('border-color', '#ffffff');
                    if($(this).hasClass('left-small1') ) {
                        showImag1.stop().animate({
                            left: 0
                          }, 500)
                        // return $(this).hasClass('left-small1') ;
                    }  else{
                        showImag1.stop().animate({
                            left: -width
                          }, 500)
                        //   return $(this).hasClass('left-small1') ;
                         }   
                                      
                })
                 
            }
           // https://gitee.com/daryranger/1909-project-qqcar-store.git
            hover(){//图片移入移出
                var width = $('#right-showImag1 img').eq(0).width();
                var height = $('#right-showImag1 img').eq(0).height();
                $('#right-showImag1').on('mousemove',(e)=>{
                    e = e || window.event;
                    let x = e.clientX;
                    let y = e.clientY;
                    // console.log(x,y)
                     let xx = x - $('#detail_show_shop_right').offset().left;
                    let yy = y - $('#detail_show_shop_right').offset().top;
                    // console.log(xx,yy)
                    if(parseInt($('#right-showImag1').css('left')) >= 0){
                        $('#right-showImag1').css('opacity','0');
                        $('.img1').css('opacity','1');
                        $('.img2').css('opacity','0');
                        // console.log(123)
                    }
                    else {
                        $('#right-showImag1').css('opacity','0');
                        $('.img2').css('opacity','1');
                        $('.img1').css('opacity','0');
                        // console.log(345)
                    }
                    this.move(xx,yy);
                    // console.log($('.img1').src)
                })
                $('#detail_show_shop_right').on('mouseleave',()=>{
                    $('#right-showImag1').css('opacity','1');
                    $('.img1').css('opacity','0');
                    $('.img2').css('opacity','0');
                })
            
            }
            move(x,y){
                // console.log(x,y)
                // if(x<0)
                if($("#detail_show_shop_right>img").css('left')<-416) x = 416;
                if($("#detail_show_shop_right>img").css('top')<-400) u=400;
                // if($("#detail_show_shop_right>img").css('top',))
                $("#detail_show_shop_right>img").css( {
                    'top':-y,
                    'left':-x
               })

            }
            
           addToCart(){
            $('.whole_bottom_button').on('click',(e)=>{
                this.fly(e);
                //判斷購物車是否為空
                // console.log(this.list);
                let cart = localStorage.getItem('cart');
                console.log(cart)
                if(cart){
                    //已存在：購物車不為空
                    // console.log(cart);
                    cart = JSON.parse(cart);

                    const isExsit = cart.some(shop =>{
                        return shop.id == this.list.id;
                    })
                    if(isExsit){
                        //当前商品已存在,只需要把当前商品的njm加1
                        cart = cart.map(shop => {
                            if(shop.id == this.list.id) shop.num++;
                            return shop;
                        })
                    }else{
                        //第一次添加当前商品
                        cart.push({...this.list,num:1});

                    }
                    localStorage.setItem('cart',JSON.stringify(cart));
                }
                else{
                    //購物車為空，把當前商品放入一個空數組裡
                    // console.log(1)
                    //第一次存的时候要加入num以方便判断是否是一样的商品
                    localStorage.setItem('cart',JSON.stringify([{...this.list,num:1}]));
                    // console.log(this.list)
                }
                header.cartShowNum();
            })
           }
           fly(e) {
            var fff =$(`<img src="${this.list.smallSrc[0]}" style="width:30px;height:30px;border-radius:50%">`)
            // console.log(fff);
            fff.fly({
              start: {
                left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                top: e.clientY   //开始位置（必填）
              },
              end: {
                left: $('#bao').offset().left, //结束位置（必填）
                top: $('#bao').offset().top - $(document).scrollTop(),  //结束位置（必填）
              },
              speed: 1, //越大越快，默认1.2
              vertex_Rtop: 50, //运动轨迹最高点top值，默认20
              onEnd: function () {
                // 更新购物车数量
                header.cartShowNum();
                this.destroy()
              } //结束回调
            })
          }
        }
        
       new detail();
      
       
    })
})